<template>
    <div>
        <div class="crumbs"> 
            <div class="container">
                <el-form ref="form" :model="form" label-width="130px">
					
                 <div class="lu hnk"></div><div class="hnk jgxx">企业信息</div>
                 <div class="jgcontainer">
                    <!-- <div class="hnk con"> -->
                        <!-- <el-form ref="form" :model="form" label-width="80px"> -->
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" >
								<el-form-item label="企业简称">
								<el-input class="handle-input" placeholder="追溯码上展示，不得超过6个字" v-model="form.abbreviation"></el-input>
								</el-form-item>
								<el-form-item label="所在区域：" prop="area">
									<el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
								</el-form-item>

								<el-form-item label="营业执照照片">
									<el-upload
										class="upload-poster"                               
										action="https://jsonplaceholder.typicode.com/posts/"
										:show-file-list="false"
										:on-change="imgPreview"
										:auto-upload="false">
										<img v-if="logoImg" :src="logoImg" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									jpg、png、gif格式，60x60像素，不超过2MB
								</el-form-item>
                            </el-col>
							
                        <el-col :span="12">
                        <el-form-item label="企业名称">
                            <el-input class="handle-input" placeholder="企业全称" v-model="form.name"></el-input>
                        </el-form-item>
						
                        <el-form-item label="统一社会信用代码">
                            <el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="form.creditCode"></el-input>
                        </el-form-item>
                        <el-form-item label="注册地址">
                            <el-input class="handle-input" placeholder="请填写详细注册地址" v-model="form.region"></el-input>
                        </el-form-item>
                        
                         <el-form-item label="营业期限：">
                            <el-date-picker
                                value-format="yyyy/MM/dd"
                                format="yyyy/MM/dd"
                                style="width:300px"
                                v-model="value1"
                                type="daterange"
                                :disabled="disabled1"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        
                            <el-checkbox style="margin-left:10px;" v-model="checked1" @change="changeState1">长期</el-checkbox>
                        </el-form-item> 
                        <el-form-item label="营业范围">
                            <el-input
                            style="width:300px;"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="textarea2">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    </el-row>
                     <!-- </el-form> -->
					 <div style="height:1px; background:#E4E7ED;width:100%;"></div>
					<div style="margin-top:20px;">
					    <div class="lu hnk"></div><div class="hnk jgxx">系统类型</div>
					</div> 
					<el-row>
						
					
					<el-col :span="10">
						<el-form-item label="产品名称：">
						    <el-select v-model="name" @change="getname" value-key="id"  placeholder="" style="width:150px">
						        <el-option v-for="item in listall" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
						    </el-select>
						</el-form-item>
						<el-form-item label="系统有效期" style="">
							<!-- <el-col :span="4" style="margin-left:-10px;"> -->
								<el-date-picker  type="date" placeholder="选择日期"value-format="yyyy/MM/dd"
						                format="yyyy/MM/dd"  v-model="list[0].expiretimeStart" style="width: 170px;"></el-date-picker>至
							<!-- </el-col> -->
							 
							 <!-- <el-col :span="4"> -->
								<el-date-picker type="date" placeholder="选择日期"value-format="yyyy/MM/dd"
						                format="yyyy/MM/dd"  v-model="list[0].expiretimeEnd" style="width: 170px;"></el-date-picker>
							
						</el-form-item>
					</el-col>
					<el-col :span= "14">
						<el-form-item label="版本：" label-width="70px" style="display:inline-block;">
						    <el-select v-model="version" @change="getversion" value-key="id"  placeholder="" style="width:80px">
						        <el-option v-for="item in versionlist" :key="item.id" :label="item.versionName" :value="item">{{item.versionName}}</el-option>
						    </el-select>
						</el-form-item>
						<el-form-item label="隶属：" label-width="70px" style="display:inline-block;">
						    <el-select v-model="lsname" @change="getls" value-key="id"  placeholder="" style="width:80px">
						        <el-option v-for="item in ls" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					</el-row>
                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">法人信息</div>
                    </div> 
					<el-row class="demo-ruleForm">
						<el-col :span="10">
							<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
							</el-form-item>
							<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang2" :maxNum="1" :files='listUrl2' style="width:300px"></upload-img>
							</el-form-item>
						</el-col>
						<el-col :span="14">
						
							<el-form-item label="法人代表：">
								<el-input v-model="form.legalName" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="身份证号：">
								<el-input v-model="form.legalID" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="营业期限：">
									<el-date-picker
										value-format="yyyy/MM/dd"
										format="yyyy/MM/dd"
										style="width:300px"
										v-model="value2"
										type="daterange"
										:disabled="disabled2"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								   <el-checkbox style="margin-left:10px;" v-model="checked2" @change="changeState2">长期</el-checkbox>
							</el-form-item>
							<el-form-item label="手机号：" style="width:500px">
								<el-input v-model="form.legalPhone" style="width:300px"></el-input>
							</el-form-item>
							
						</el-col>
					</el-row>
                 
                    <!-- </el-form> -->

                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">运营者信息</div>
                    </div> 
					<el-row class="demo-ruleForm">
						<el-col :span="10">
							<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang3" :maxNum="1" :files='listUrl3' style="width:300px"></upload-img>
							</el-form-item>
							<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang4" :maxNum="1" :files='listUrl4 ' style="width:300px"></upload-img>
							</el-form-item>
						</el-col>
						<el-col :span="14">
						
							<el-form-item label="运营人代表：">
								<el-input v-model="form.operateName" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="身份证号：">
								<el-input v-model="form.operateID" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="营业期限：">
									<el-date-picker
										value-format="yyyy/MM/dd"
										format="yyyy/MM/dd"
										style="width:300px"
										v-model="value3"
										type="daterange"
										:disabled="disabled3"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								   <el-checkbox style="margin-left:10px;" v-model="checked3" @change="changeState3">长期</el-checkbox>
							</el-form-item>
							<el-form-item label="手机号：" style="width:500px">
								<el-input v-model="form.operatePhone" style="width:300px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
                    
                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">账号密码</div>
                    </div> 
					<el-row style="margin-top:20px;">
						<el-col :span="10" >
							<el-form-item label="手机号码">
								<el-input class="handle-input" placeholder="请输入手机号" v-model="user.userName"></el-input>
							</el-form-item>
							<el-form-item label="确认密码">
								<el-input class="handle-input" placeholder="与密码保持一致" v-model="user.password"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="密码">
								<el-input class="handle-input" placeholder="6-16位数字、字符、字母" v-model="password"></el-input>
							</el-form-item>
							
						</el-col>
					</el-row>
                </div>
				<el-form-item class="footerFixed">
				    <el-button type="primary" @click="qy_save">提交</el-button>
				    <el-button @click="backPage">返回</el-button>
				</el-form-item>
				</el-form>
            </div>
        </div>
    </div>
</template>

<script>
	import uploadImg from '../../../common/uploadImg';
   import {regionData,CodeToText} from 'element-china-area-data'
   import {goverment_save,control_lists,app_listall_customapp,app_list_customappversion,company_findByType} from "@/request/api"
    export default {
		components: {
		    uploadImg
		},
		
        data(){
            return{
				lsname:'',
				logoImg:'',
				password:'',
				listUrl1:'',
				listUrl2:'',
				listUrl3:'',
				listUrl4:'',
				value3:'',
				disabled3:false,
				checked3:'',
				value2:'',
				disabled2:false,
				checked2:'',
				value1:'',
				disabled1:false,
				checked1:'',
                select2:'',
                select1:'',
                select:'',
                textarea2:'',
                imageUrl:'',
				options: regionData,
                form: {
					files:'',
					
					type:1
                },
				user:{
				    userName:'',
				    password:''
				},
				list:[{appId:''}],
				ls:[],
				listall:[],
				versionlist:[],
				name:'',
				version:''
            }
        },
		mounted(){
			this.init()
		},
		methods: {
			getls(ele){
				this.list[0].parentCompanyId = ele.id
				this.list[0].parentCompanyName = ele.name
			},
			getversion(ele){
				this.list[0].customAppVersionId = ele.id
				this.list[0].customAppVersionName = ele.versionName
			},
			getname(ele){
				// console.log(ele)
				this.list[0].appId = ele.appId
				this.list[0].customAppName = ele.name
				app_list_customappversion(ele.id).then((res)=>{
					this.versionlist = res.data
				})
			},
			init(){
				app_listall_customapp("").then((res)=>{
					this.listall = res.data
				})
				company_findByType("1").then((res)=>{
					this.ls = res.data
				})
			},
			imgPreview(file,fileList){
			    this.logoImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.form.files = file.raw
			        this.form.licenseImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			backPage(){
				this.$router.go(-1)
			},
			qy_save(){
				this.form.versionsString = JSON.stringify(this.list)
				// console.log(r)
				// console.log(this.form.versionsString)
				this.form.parentId = this.list[0].parentCompanyId
				this.form.parentName = this.list[0].parentCompanyName 
				this.form.area = this.form.area.join(",")
				if(this.checked1 == true){
				   this.form.term = "永久"  
				}else{
				    if(this.value1 == ""){
				
				    }else{
				        this.form.term = this.value1[0] + "至" + this.value1[1]
				    }
				}
				if(this.checked2 == true){
				   this.form.legalTime = "永久"  
				}else{
				    if(this.value2 == ""){
				
				    }else{
				        this.form.legalTime = this.value2[0] + "至" + this.value2[1]
				    }
				}
				if(this.checked3 == true){
				   this.form.operateTime = "永久"  
				}else{
				    if(this.value3 == ""){
				
				    }else{
				        this.form.operateTime = this.value3[0] + "至" + this.value3[1]
				    }
				}
				let formdata = new FormData()
				var imgurls1 = this.$refs.uploadChang1.fileList
				var arr1 = ""
				for(var i=0;i<imgurls1.length;i++){
				    if(imgurls1[i].status != "success"){
				        formdata.append("files",imgurls1[i].raw)
				    }
				    arr1 += imgurls1[i].name + ';'
				}
				var str1 = arr1.substr(0,arr1.length-1)
				this.form.legalImg = str1.substring(str1.lastIndexOf("/")+1)
				
				var imgurls2 = this.$refs.uploadChang2.fileList
				var arr2 = ""
				for(var i=0;i<imgurls2.length;i++){
				    if(imgurls2[i].status != "success"){
				        formdata.append("files",imgurls2[i].raw)
				    }
				    arr2 += imgurls2[i].name + ';'
				}
				var str2 = arr2.substr(0,arr2.length-1)
				this.form.legalIDImg = str2.substring(str2.lastIndexOf("/")+1)
				
				var imgurls3 = this.$refs.uploadChang3.fileList
				var arr3 = ""
				for(var i=0;i<imgurls3.length;i++){
				    if(imgurls3[i].status != "success"){
				        formdata.append("files",imgurls3[i].raw)
				    }
				    arr3 += imgurls3[i].name + ';'
				}
				var str3 = arr3.substr(0,arr3.length-1)
				this.form.operateImg = str3.substring(str3.lastIndexOf("/")+1)
				
				
				var imgurls4 = this.$refs.uploadChang4.fileList
				var arr4 = ""
				for(var i=0;i<imgurls4.length;i++){
				    if(imgurls4[i].status != "success"){
				        formdata.append("files",imgurls4[i].raw)
				    }
				    arr4 += imgurls4[i].name + ';'
				}
				var str4 = arr4.substr(0,arr4.length-1)
				this.form.operateIDImg = str4.substring(str4.lastIndexOf("/")+1)
				this.form.user = JSON.stringify(this.user)
				
				
				for(var a in this.form){
				    if(this.form[a] == null || this.form[a] == "null"){
				        this.form[a] = ""
				        formdata.append(a,'') 
				    }else{
				        formdata.append(a,this.form[a])
				    }
				}
				
				goverment_save(formdata).then((res)=>{
					this.$notify({
					    title: '操作成功',
					    message: '保存成功',
					    type: 'success'
					});
				    this.$router.go(-1)
				})
			},
			changeState1(){
				
			},
			changeState2(){
				
			},
			changeState3(){
				
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
		
				if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		

 
    }
</script>

<style scoped>
    .crumbs{
        width:95%;
        margin:0 auto;
        margin-top: 30px;
        background: #ffffff;
    }
    .container{
        padding:10px;
    }
    .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
    .jgcontainer{
        font-weight: 400;
    }
    .con{
        width:40%;
        padding: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
        /* margin-left: 30px; */
    }
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
</style>